<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="牧中智慧畜牧大数据云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>
    <link rel="stylesheet" href="/webjars/js/layui/css/layui.css" media="all">
    <title>牧中智慧畜牧大数据云平台V1.0</title>


</head>
<style>
    input {

        font-size: 14px;
        color: #0e90d2;

    }

</style>
<body style="background-color:#fff">

<div class="wrapper wrapper-content" style="margin-top: 50px;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div class="row">


                        <div class='row' style="margin-left: 50px">
                            <div class="page-aside app tree">
                                <div class="fixed nano nscroller">
                                    <div class="content" style="height: 360px" id="content">
                                        <div class="header">
                                            <button class="navbar-toggle" data-target=".treeview" data-toggle="collapse"
                                                    type="button">
                                                <span class="fa fa-chevron-down"></span>
                                            </button>
                                            <h2 class="page-title">角色权限</h2>
                                            <p class="description">Administrative division</p>
                                        </div>

                                        <ul class="nav nav-list treeview collapse">
                                            <li><label class="tree-toggler nav-header" id="city"><i
                                                    class="fa fa-folder-o"></i> 授权分配 </label>
                                                <ul class="nav nav-list tree" id="moduleTree">


                                                </ul>
                                            </li>

                                        </ul>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="col-sm-6 col-md-6" style="margin-left: 350px;margin-top: 70px">
                            <div class="header">
                                <h3>编辑角色权限</h3>
                            </div>
                            <input hidden="hidden" id="roleId"/>
                            <div class="content">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-2 control-label">角色名</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="name" readonly="readonly"/>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

                    </div>


                </div>


            </div>

        </div>
    </div>

</div>
<span id="message" style="margin-left: 300px;color: red;font-size: 18px;"></span>
<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript"
        src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/webjars/js/laydate/laydate.js"></script>
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="/webjars/js/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    var role = new Array();
    $(document).ready(function () {
        //initialize the javascript
        App.init();
        binding();
        /*<li>
         <label class="tree-toggler nav-header" id="region"
         th:onclick="'javascript:subordinate('+${module.id}+')'"><i
         class="fa fa-folder-o"></i>
         <span th:id="${module.id}" th:value="${module.url}"
         th:text="${module.name}"></span>
         </label>
         <ul class="nav nav-list tree">*/

        $.ajax({
            type: "GET",
            url: "/management/role/findFirst",
            data: {
                type: 1
            },
            dataType: "json",
            success: function (data) {
                var demo2 = $("#moduleTree");
                demo2.html("");
                $.each(data, function (index, item) {
                    /*<span th:value="${area.areaCode}" th:text="${area.areaName}" level="2"></span>*/
                    var str = "";
                    str += "<li><label class='tree-toggler nav-header' id='village' onclick='subordinate(" + item.id + ")'>" +
                        "<i class='fa fa-folder-o'></i>" +
                        "<span id='" + item.id + "'>" + item.name + "</span></label>" +
                        "<ul class='nav nav-list tree'>" +
                        "</ul></li>"
                    demo2.append(str);
                })
                binding();
            }
        });

        var int = window.setInterval(showalert, 500);
        function showalert() {
            var id = $("#roleId").val();
            if (id == null || id == "") {

            } else {
                $.ajax({
                    type: "GET",
                    url: "/management/role/oldRole",
                    data: {
                        id: id
                    },
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (index, item) {
                            role.push(item);
                        });
                    }
                });

                window.clearInterval(int);
            }
        }


        $("#content").change(function(){
            $.each($("input[checked='checked']"),function(index,demo){
                var id = demo.attr("id");

            })
        })


    });



    binding = function () {
        $('label.tree-toggler').unbind("click");
        $('label.tree-toggler').click(function () {
            var icon = $(this).children(".fa");
            if (icon.hasClass("fa-folder-o")) {
                icon.removeClass("fa-folder-o").addClass("fa-folder-open-o");
            } else {
                icon.removeClass("fa-folder-open-o").addClass("fa-folder-o");
            }

            $(this).parent().children('ul.tree').toggle(300, function () {
                $(this).parent().toggleClass("open");
                $(".tree .nscroller").nanoScroller({preventPageScrolling: true});
            });

        });
    }
    function subordinate(id) {
        var demo = $("#" + id);
        $.ajax({
            type: "GET",
            url: "/management/role/findChild",
            data: {
                parentId: id
            },
            dataType: "json",
            success: function (data) {
                var demo2 = demo.parent().next();
                demo2.html("");
                $.each(data, function (index, item) {
                    /*<span th:value="${area.areaCode}" th:text="${area.areaName}" level="2"></span>*/
                    var str = "";
                    if (role.indexOf(item.id) != -1) {
                        if (item.type < 3) {
                            str += "<li><label class='tree-toggler nav-header' id='village' onclick='subordinate(" + item.id + ")'>" +
                                "<i class='fa fa-folder-o'></i>" +
                                "<span id='" + item.id + "'>" + item.name + "</span></label>" +
                                "<ul class='nav nav-list tree'>" +
                                "</ul></li>"
                        } else {
                            /*<a href="javascript:void(0)"><input type="checkbox" name="check"/></a>*/
                            str += "<li> <a href='javascript:void(0)' ><input type='checkbox' name='check' value='" + item.id + "' id='" + item.id + "' checked='checked' />" + item.name +
                                "</a></li>"
                        }
                    } else {
                        if (item.type < 3) {
                            str += "<li><label class='tree-toggler nav-header' id='village' onclick='subordinate(" + item.id + ")'>" +
                                "<i class='fa fa-folder-o'></i>" +
                                "<span id='" + item.id + "'>" + item.name + "</span></label>" +
                                "<ul class='nav nav-list tree'>" +
                                "</ul></li>"
                        } else {
                            /*<a href="javascript:void(0)"><input type="checkbox" name="check"/></a>*/
                            str += "<li> <a href='javascript:void(0)' ><input type='checkbox' name='check' id='" + item.id + "'  value='" + item.id + "' />" + item.name +
                                "</a></li>"
                        }
                    }


                    demo2.append(str);
                })
                binding();
            }
        });

    }
</script>


</body>
</html>
